<template>
  <div class="interviews-container">
    <el-card>
      <div class="header">
        <h2>面试管理</h2>
        <div class="actions">
          <el-button type="primary" icon="el-icon-plus" @click="showCreateDialog">安排面试</el-button>
          <el-button icon="el-icon-refresh" @click="refreshList">刷新</el-button>
        </div>
      </div>
    </el-card>

    <el-card class="mt-20">
      <div class="filter-controls">
        <el-input
            v-model="filter.keyword"
            placeholder="搜索姓名/职位"
            clearable
            style="width: 250px; margin-right: 15px;"
        />
        <el-select
            v-model="filter.status"
            placeholder="面试状态"
            clearable
            style="width: 180px; margin-right: 15px;"
        >
          <el-option label="待面试" value="pending" />
          <el-option label="已安排" value="scheduled" />
          <el-option label="已完成" value="completed" />
          <el-option label="已取消" value="canceled" />
        </el-select>
        <el-date-picker
            v-model="filter.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="width: 350px; margin-right: 15px;"
        />
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>

      <el-table :data="filteredInterviews" style="width: 100%" height="600">
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="position" label="应聘职位" width="180" />
        <el-table-column prop="interviewTime" label="面试时间" width="180" />
        <el-table-column prop="interviewers" label="面试官" width="200" />
        <el-table-column prop="location" label="面试地点" width="180" />
        <el-table-column label="状态" width="120">
          <template #default="scope">
            <el-tag :type="statusTagType(scope.row.status)">
              {{ formatStatus(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <el-button
                v-if="scope.row.status === 'pending' || scope.row.status === 'scheduled'"
                size="small"
                type="primary"
                @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
                v-if="scope.row.status === 'pending' || scope.row.status === 'scheduled'"
                size="small"
                type="danger"
                @click="cancelInterview(scope.row)"
            >取消</el-button>
            <el-button
                v-if="scope.row.status === 'completed'"
                size="small"
                @click="viewEvaluation(scope.row)"
            >查看评价</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 安排面试对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
      <el-form :model="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="候选人" required>
              <el-select v-model="form.candidateId" placeholder="选择候选人">
                <el-option
                    v-for="candidate in candidates"
                    :key="candidate.id"
                    :label="candidate.name"
                    :value="candidate.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="应聘职位" required>
              <el-input v-model="form.position" placeholder="输入应聘职位" />
            </el-form-item>
            <el-form-item label="面试时间" required>
              <el-date-picker
                  v-model="form.interviewTime"
                  type="datetime"
                  placeholder="选择面试时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="面试官" required>
              <el-select
                  v-model="form.interviewers"
                  multiple
                  placeholder="选择面试官"
              >
                <el-option
                    v-for="interviewer in interviewerOptions"
                    :key="interviewer.id"
                    :label="interviewer.name"
                    :value="interviewer.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="面试地点" required>
              <el-input v-model="form.location" placeholder="输入面试地点" />
            </el-form-item>
            <el-form-item label="面试形式">
              <el-radio-group v-model="form.type">
                <el-radio label="现场面试">现场面试</el-radio>
                <el-radio label="视频面试">视频面试</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input v-model="form.notes" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveInterview">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Interviews',
  setup() {
    const dialogVisible = ref(false)
    const dialogTitle = ref('安排面试')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(15)

    const filter = reactive({
      keyword: '',
      status: '',
      dateRange: []
    })

    const interviews = ref([
      {
        id: 1,
        candidateId: 1001,
        name: '张三',
        position: '前端工程师',
        interviewTime: '2023-05-25 14:00',
        interviewers: '李经理, 王主管',
        location: '会议室A',
        type: '现场面试',
        status: 'scheduled',
        notes: '需要考察JavaScript基础'
      },
      {
        id: 2,
        candidateId: 1002,
        name: '李四',
        position: '后端工程师',
        interviewTime: '2023-05-26 10:30',
        interviewers: '张总监',
        location: '视频会议',
        type: '视频面试',
        status: 'pending',
        notes: '重点考察系统设计能力'
      },
      {
        id: 3,
        candidateId: 1003,
        name: '王五',
        position: 'UI设计师',
        interviewTime: '2023-05-20 09:30',
        interviewers: '陈经理, 赵主管',
        location: '设计中心',
        type: '现场面试',
        status: 'completed',
        notes: '已通过初试，安排复试'
      }
    ])

    const candidates = ref([
      { id: 1001, name: '张三', position: '前端工程师' },
      { id: 1002, name: '李四', position: '后端工程师' },
      { id: 1003, name: '王五', position: 'UI设计师' },
      { id: 1004, name: '赵六', position: '产品经理' }
    ])

    const interviewerOptions = ref([
      { id: 2001, name: '李经理', position: '技术经理' },
      { id: 2002, name: '王主管', position: '前端主管' },
      { id: 2003, name: '张总监', position: '技术总监' },
      { id: 2004, name: '陈经理', position: '设计经理' }
    ])

    const form = reactive({
      candidateId: '',
      position: '',
      interviewTime: '',
      interviewers: [],
      location: '',
      type: '现场面试',
      notes: ''
    })

    const filteredInterviews = computed(() => {
      return interviews.value.filter(item => {
        const matchesKeyword = filter.keyword ?
            (item.name.includes(filter.keyword) || item.position.includes(filter.keyword)) : true

        const matchesStatus = filter.status ?
            item.status === filter.status : true

        return matchesKeyword && matchesStatus
      })
    })

    const formatStatus = (status) => {
      const map = {
        pending: '待安排',
        scheduled: '已安排',
        completed: '已完成',
        canceled: '已取消'
      }
      return map[status] || status
    }

    const statusTagType = (status) => {
      const map = {
        pending: 'warning',
        scheduled: 'primary',
        completed: 'success',
        canceled: 'danger'
      }
      return map[status] || 'info'
    }

    const showCreateDialog = () => {
      dialogTitle.value = '安排面试'
      Object.assign(form, {
        candidateId: '',
        position: '',
        interviewTime: '',
        interviewers: [],
        location: '',
        type: '现场面试',
        notes: ''
      })
      dialogVisible.value = true
    }

    const handleEdit = (row) => {
      dialogTitle.value = '编辑面试安排'
      Object.assign(form, {
        candidateId: row.candidateId,
        position: row.position,
        interviewTime: row.interviewTime,
        interviewers: row.interviewers.split(', '),
        location: row.location,
        type: row.type,
        notes: row.notes
      })
      dialogVisible.value = true
    }

    const saveInterview = () => {
      if (form.candidateId && form.position && form.interviewTime && form.interviewers.length && form.location) {
        ElMessage.success('面试安排保存成功')
        dialogVisible.value = false
      } else {
        ElMessage.error('请填写完整信息')
      }
    }

    const cancelInterview = (row) => {
      row.status = 'canceled'
      ElMessage.success('面试已取消')
    }

    const viewEvaluation = (row) => {
      ElMessage.info(`查看面试评价: ${row.name}`)
    }

    const search = () => {
      currentPage.value = 1
    }

    const refreshList = () => {
      ElMessage.success('面试列表已刷新')
    }

    const handlePageChange = (page) => {
      currentPage.value = page
    }

    return {
      dialogVisible,
      dialogTitle,
      currentPage,
      pageSize,
      total,
      filter,
      form,
      candidates,
      interviewerOptions,
      interviews,
      filteredInterviews,
      formatStatus,
      statusTagType,
      showCreateDialog,
      handleEdit,
      saveInterview,
      cancelInterview,
      viewEvaluation,
      search,
      refreshList,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.interviews-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-20 {
  margin-top: 20px;
}

.filter-controls {
  display: flex;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>